<template>
  <div class="holder">
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      @tab-remove="removeTab"
      :closable="isClosable"
      type="card"
    >
      <el-tab-pane
        label="首页"
        name="1"
        :disabled="this.editableTabs.length == '0'"
      >
        <div class="fires-box">
          <div class="top">消防安全基本情况档案</div>
          <div class="bottom">
            <div
              class="con"
              v-for="item in filedata[0]"
              :key="item.code"
              @click="filecord(item)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="fires-box">
          <div class="top">消防安全管理情况档案</div>
          <div class="bottom">
            <div
              class="con"
              v-for="item in filedata[1]"
              :key="item.code"
              @click="filecord(item)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.code"
        :label="item.name"
        :name="item.code"
      >
        <template>
          <CanvasPt v-if="item.code == 100"></CanvasPt>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 点位拖拽
import CanvasPt from './components/CanvasPt.vue'
export default {
  name: 'canvaser',
  components: {
    CanvasPt
  },
  data() {
    return {
      filedata: [
        [
          { code: '100', name: '风过无痕' },
          { code: '101', name: '风过无痕' },
          { code: '102', name: '风过无痕' },
          { code: '103', name: '风过无痕' },
          { code: '104', name: '风过无痕' },
          { code: '105', name: '风过无痕' },
          { code: '106', name: '风过无痕' },
          { code: '107', name: '风过无痕' },
          { code: '108', name: '风过无痕' }
        ],
        [
          { code: '110', name: '风过无痕' },
          { code: '111', name: '风过无痕' },
          { code: '112', name: '风过无痕' },
          { code: '113', name: '风过无痕' },
          { code: '114', name: '风过无痕' },
          { code: '115', name: '风过无痕' },
          { code: '116', name: '风过无痕' },
          { code: '117', name: '风过无痕' },
          { code: '118', name: '风过无痕' }
        ]
      ],
      activeName: '1',
      editableTabs: [],
      isClosable: true
    }
  },
  created() {
    // this.inquirer()
  },
  methods: {
    // tab栏选中事件
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // tab栏删除事件
    removeTab(targetName) {
      console.log('删除', targetName)
      const index = this.editableTabs.findIndex((v) => v.code == targetName)
      console.log('当前数据下标', index)
      this.editableTabs.splice(index, 1)
      this.activeName = '1'
    },
    // 档案点击事件
    filecord(item) {
      // // 判断是否已经添加;
      // let flg = false;
      // console.log(this.editableTabs);
      // if (this.editableTabs.length > "0") {
      //   this.editableTabs.map((m) => {
      //     console.log("判断条件", m.code, item.code);
      //     if (m.id == item.id) {
      //       this.$message.success("找到了");
      //       flg = true;
      //       return;
      //     }
      //   });
      // }
      // // 每一项结果
      // console.log("每一项结果", item);
      // if (!flg) {
      //   // 加到动态数组
      //   this.editableTabs.push(item);
      //   // 跳转到该页面
      //   this.activeName = item.code;
      // }

      for (let i = 0; i < this.editableTabs.length; i++) {
        if (item.code == this.editableTabs[i].code) {
          return this.$message.success('不要点击重复的')
        }
      }
      // 加到动态数组
      this.editableTabs.push(item)
      // 跳转到该页面
      this.activeName = item.code
    },
    qin(item) {
      console.log('item', item)
      let newTabName = item.id
      console.log(++this.tabIndex)
      console.log(newTabName)
      let x = item.x
      let y = item.y
      this.editableTabs.push({
        title: x,
        name: newTabName,
        content: y
      })
      this.activeName = newTabName
    },
    async inquirer() {
      // console.log("111");
      //   const { data: res } = await fileselectRecord()
      //   this.filedata = res
      //   let data = res
      //   console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.holder {
  width: 100%;
  height: 100%;
  padding: 15px 30px;
  background-color: #f2f2f2;
  //   background-color: red;
  @media screen and (min-height: 950px) and (max-height: 990px) {
    padding: 35px 25px;
  }
  @media screen and (min-height: 1070px) {
    height: 1030px;
    padding: 90px 25px;
  }
  ::v-deep .el-tabs__nav-scroll {
    background-color: #fff;
    border-radius: 5px;
  }

  .fires-box {
    height: 390px;
    border-radius: 20px;
    padding: 10px 40px;
    // background-color: skyblue !important;
    background-color: #ffffff;
    .top {
      font-size: 30px;
      font-weight: 700;
      margin: 20px 0 30px 0;
    }
    .bottom {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: space-around;
      .con {
        width: 33.33%;
        height: 90px;
        // background-color: yellow;
        cursor: pointer;
        line-height: 90px;
        color: #537dbb;
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:hover {
          color: black;
          font-weight: 700;
          font-size: 22px;
          border-bottom: 1px solid #ccc;
        }
      }
    }
    &:last-child {
      margin-top: 20px;
    }
  }
}
</style>